import Taro, { Component, Config } from '@tarojs/taro';
import { View, Button, Text } from '@tarojs/components';

import './index.less';
import { add, AddAction, CounterAction, minus, MinusAction } from '../../actions/counter';
import { StoreState } from '../../store';
import { Dispatch } from 'redux';
import { connect } from '@tarojs/redux';

type PageOwnProps = {
  counter: {
    num: number;
  };
  add: () => AddAction;
  dec: () => MinusAction;
};

class Index extends Component<PageOwnProps, {}> {
  config: Config = {
    navigationBarTitleText: '流年的樱花逝',
    navigationBarBackgroundColor: '#187b80'
  };

  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps);
  }

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    return (
      <View className="index">
        <Button className="add_btn" onClick={this.props.add}>
          +
        </Button>
        <Button className="dec_btn" onClick={this.props.dec}>
          -
        </Button>
        <View>
          <Text>{this.props.counter.num}</Text>
        </View>
        <View>
          <Text>Hello, World</Text>
        </View>
      </View>
    );
  }
}
const mapStateToProps = ({ counter }: StoreState) => ({
  counter
});
/* 这里将 add 映射为redux的dispatch 分发action*/
const mapDispatchToProps = (dispatch: Dispatch<CounterAction>) => ({
  add: () => dispatch(add()),
  dec: () => dispatch(minus())
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Index);
